import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { buttonGroupDefaultProps } from './defaultProps';
import type { ButtonGroupOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface ButtonGroupProps extends ButtonGroupOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const ButtonGroup: FC<ButtonGroupProps> = (props) => {
  const { className, icon, fluid, equal, children, forwardedRef, ...buttonGroupProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames('ui', { icon, fluid }, numberToWord(equal), 'buttons', className),
      ...buttonGroupProps,
    },
    children,
  );
};

ButtonGroup.displayName = 'ButtonGroup';
ButtonGroup.defaultProps = buttonGroupDefaultProps;

export default ButtonGroup;
